<template>
    <h2>会员等级显示页面</h2>
    会员等级名称<input type="text" v-model="MRname"/>
    <input type="button" value="查询" @click="SelectData"/>
    <input type="button" value="添加等级" @click="addRank"/>
    <table border="1">
        <thead>
            <tr>
            <td>会员等级编号</td>
            <td>会员等级名称</td>
            <td>会员等级状态</td>
            <td>最大成长值</td>
            <td>最小成长值</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="item in rank" :key="item.MR_Id">
            <td>{{item.MR_Id}}</td>
            <td>{{item.MR_Name}}</td>
            <td>{{ item.MR_State }}</td>
            <td>{{item.MR_MaxPoint}}</td>
            <td>{{item.MR_MinPoint}}</td>
            <td>
                <input type="button" value="删除" @click="delRank(item.MR_Id)"/>
                <input type="button" value="编辑" @click="editRank(String(item.MR_Id))"/>
            </td>
        </tr>
        </tbody>
    </table>
    共{{ page.count }}条数据，每页显示{{ page.size }}条,第{{ page.index }}/{{ page.pcount }}页
    <a href="#" style="margin-right=10px" @click="pageInfo('F')">首页</a>
    <a href="#" style="margin-right=10px" @click="pageInfo('P')">上一页</a>
    <a href="#" style="margin-right=10px" @click="pageInfo('N')">下一页</a>
    <a href="#" style="margin-right=10px" @click="pageInfo('E')">尾页</a>
    <select v-model="csize" @change="ChangeSize">
        <option value="1">每页1条</option>
        <option value="2">每页2条</option>
        <option value="3">每页3条</option>
    </select>
    <input type="text" style="width:20px" v-model="nindex"/>
    <input type="button" value="跳转" @click="jump"/>
</template>

<script setup lang="ts">
    import {ref,onMounted} from 'vue'
    import {useRouter,useRoute} from 'vue-router'
    const router=useRouter();
    const route=useRoute();
    import axios from 'axios'
    const editRank=(MRId:string)=>{
        router.push({
            path:"/editRank",
            query:{
                MRId:MRId
            }
        })
    }

    const delRank=(MRId:Number)=>{
       if(confirm('确定删除吗'))
       {
        axios.delete('https://localhost:44320/api/Member/RankDel',{
            params:{
                MRid:MRId
            }
        })
        .then(res=>{
            if(res.data>0)
            {
                alert('删除成功');
                loadData();
            }
            else
            {
                alert('删除失败');
            }
        })
       }
    }


    const pageInfo=(mes:string)=>{
        switch(mes){
            case 'F':page.value.index=1;break;
            case 'P':
                if(page.value.index>1)
                {
                    page.value.index--;
                }
                else
                {
                    alert('已经是第一页了');
                }
                break;
            case 'N':
                if(page.value.index<page.value.pcount)
                {
                    page.value.index++;
                }
                else
                {
                    alert('已经是最后一页了');
                }
                break;
            case 'E':page.value.index=page.value.pcount;break;               
        }
        loadData();
    }
    const csize=ref(2);
    const ChangeSize=()=>{
        page.value.size=csize.value;
        page.value.index=1;
        loadData();
    }
    const nindex=ref("");
    const jump=()=>{
        if(nindex.value=="")
        {
            alert('请输入页码');
            return;
        }
        if(isNaN(Number(nindex.value)))
        {
            alert('请输入数字');
            return;
        }
        if(Number(nindex.value)>=1&&Number(nindex.value)<=page.value.pcount)
        {
            page.value.index=Number(nindex.value);
            loadData();
        }
        else
        {
            alert('请输入有效页码');
            return;
        }
    }

    const MRname=ref("");
    const rank=ref([ {
      "MR_Id": 0,
      "MR_Name": "",
      "MR_State": "",
      "MR_MaxPoint": 0,
      "MR_MinPoint": 0
    }])
    const page=ref({
        pcount:0,
        count:0,
        index:1,
        size:2
    })
    onMounted(()=>{
        loadData();
    })
    const loadData=()=>{
        axios.get('https://localhost:44320/api/Member/RankShow',{
            params:{
                MRname:MRname.value,
                index:page.value.index,
                size:page.value.size
            }
        })
        .then(res=>{
            rank.value=res.data.pageList;
            page.value.count=res.data.count;
            page.value.pcount=res.data.pcount;
        })
    }
    const SelectData=()=>{
        loadData();
        page.value.index=1;
    }
    const addRank=()=>{
        router.push('/addRank');
    }

</script>